<template>
  <div class="side">
    <div class="register">
      <el-row>
        <el-button @click="createData" class="dakai" type="primary">提交</el-button>
      </el-row>
    </div>
    <el-form :model="LoginSet" label-position="right" label-width="183px" ref="dataForm">
      <el-form-item label="用户登录限制">
        <el-radio-group v-model="LoginSet.userLoginLimit">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:408px;height:21px;font-size:14px;line-height:27px;margin:0;color:#606266">开启后同一帐号只能在一处（同一IP下使用一个浏览器）进行登录</p>
      </el-form-item>
      <el-form-item label="第三方登录">
        <el-radio-group v-model="LoginSet.thirdPartyLogin">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户登录保护">
        <el-radio-group v-model="LoginSet.userLoginProtect">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:624px;height:31px;font-size:14px;line-height:27px;margin:0;color:#606266">开启后，登录时用户连续多次输入错误密码时暂时封禁用户,此功能不影响admin手动永久封禁用户</p>
      </el-form-item>
      <!-- 微博登录接口 -->
      <div class="money">微博登录接口</div>
      <el-form-item label="微博登录接口">
        <el-radio-group v-model="LoginSet.weiboLoginInterface">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:408px;height:20px;font-size:14px;line-height:27px;margin:0;color:#428bcb"><a href="https://open.weibo.com/authentication/?sudaref=bjtest1.edusoho.cn&display=0&retcode=6102" target="_blank">申请微博登录接口</a></p>
      </el-form-item>
      <el-form-item label="App Key">
        <el-input placeholder="" style="width:600px;" v-model="LoginSet.weiboAppKey"></el-input>
      </el-form-item>
      <el-form-item label="App Secret">
        <el-input placeholder="" style="width:600px;" v-model="LoginSet.weiboAppSecret"></el-input>
        <p style="width:408px;height:20px;font-size:14px;line-height:27px;margin:0;color:#428bcb"><a href="https://open.weibo.com/authentication/?sudaref=bjtest1.edusoho.cn&display=0&retcode=6102" target="_blank">最后一步,请在底部输入登录接口验证代码></a></p>
      </el-form-item>
      <!-- qq登录接口 -->
      <div class="weixin">QQ登录接口</div>
      <el-form-item label="qq登录接口">
        <el-radio-group v-model="LoginSet.qqLoginInterface">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:408px;height:20px;font-size:14px;line-height:27px;margin:0;color:#428bcb"><a href="https://open.weibo.com/authentication/?sudaref=bjtest1.edusoho.cn&display=0&retcode=6102" target="_blank">申请qq登录接口 接入帮助</a></p>
      </el-form-item>
      <el-form-item label="App ID">
        <el-input placeholder="" style="width:641px;" v-model="LoginSet.qqAppId"></el-input>
      </el-form-item>
      <el-form-item label="App Key">
        <el-input placeholder="" style="width:600px;" v-model="LoginSet.qqAppKey"></el-input>
      </el-form-item>

      <!-- 微信网页登录接口 -->
      <div class="lianjie">微信网页登录接口</div>
      <el-form-item label="微信网页登录接口">
        <el-radio-group v-model="LoginSet.weChatWebLoginInterface">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:853px;height:20px;font-size:14px;line-height:27px;margin:0;color:#606266">请先到
          <a href="https://open.weixin.qq.com/" style="color:#428bcb" target="_blank">微信开放平台</a>
          申请
          <a href="https://open.weixin.qq.com/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN" style="color:#428bcb" target="_blank">网站应用开发</a>，
          开通后，网站PC端将支持微信扫码登录；申请条件：在微信开放平台注册并且完成实名认证。</p>
      </el-form-item>
      <el-form-item label="App ID">
        <el-input placeholder="" style="width:600px;" v-model="LoginSet.wechatAppId"></el-input>
      </el-form-item>
      <el-form-item label="App Secret">
        <el-input placeholder="" style="width:600px;" v-model="LoginSet.wechatAppSecret"></el-input>
        <p style="width:540px;height:20px;font-size:14px;line-height:27px;margin:0;color:#727272">APP ID和APP Secret来自<a href="https://open.weibo.com/authentication/?sudaref=bjtest1.edusoho.cn&display=0&retcode=6102" style="color:#428bcb" target="_blank">微信公众号平台</a>创建的网站应用</p>
      </el-form-item>

      <!-- 微信内分享登录接口 -->
      <div class="fenxiang">微信内分享登录接口</div>
      <el-form-item label="微信内分享登录接口">
        <el-radio-group v-model="LoginSet.wechatShareLoginInterface">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:430px;height:57px;font-size:14px;line-height:27px;margin:0;color:#606266">开通后，支持使用微信号在手机端微信APP内快捷注册或登录网站。如何开通：1、一个已认证的
          <a href="https://mp.weixin.qq.com/" style="color:#428bcb" target="_blank">微信服务号</a>
          2、一个以认证的
          <a href="https://open.weixin.qq.com/" style="color:#428bcb" target="_blank">微信开放平台</a>，
          3.服务号绑定到<a href="https://open.weixin.qq.com/" style="color:#428bcb" target="_blank">微信开放平台</a></p>
      </el-form-item>
      <el-form-item label="App ID">
        <el-input placeholder="" style="width:600px;" v-model="LoginSet.wechatShareLoginAppId"></el-input>
      </el-form-item>
      <el-form-item label=" App Secret">
        <el-input placeholder="" style="width:643px;" v-model="LoginSet.wechatShareLoginAppSecret"></el-input>
        <p style="width:408px;height:57px;font-size:14px;line-height:27px;margin:0;color:#727272">APP ID和APP Secret来自<a href="https://open.weibo.com/authentication/?sudaref=bjtest1.edusoho.cn&display=0&retcode=6102" style="color:#428bcb" target="_blank">微信公众号平台</a>服务号内，在左侧栏【开发】-【基本配置】-【开发者ID】中。 </p>
      </el-form-item>
      <el-form-item label=" MP文件验证码">
        <el-input placeholder="" style="width:643px;" v-model="LoginSet.mp"></el-input>
        <p style="width:408px;height:20px;font-size:14px;line-height:27px;margin:0;color:#727272">请填写微信提供的MP_verify文件中的内容</p>
      </el-form-item>
      <div class="fenxiang">登录接口验证代码</div>
      <el-form-item label=" 验证代码">
        <el-input
          :rows="4"
          placeholder="请输入内容"
          style="width:634px;margin-top:10px;"
          type="textarea"
          v-model="LoginSet.mpCode">
        </el-input>
        <p style="width:630px;height:57px;font-size:14px;line-height:27px;margin:0;color:#727272">在申请第三方登录接口时，会要求验证您的网站域名。请把相关验证代码粘到此处，然后提交保存。</p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {addLoginSet, getLoginSet} from '@/api/system/login_set';
  import {getTenantId} from '@/utils/auth';

  export default {
    data() {
      return {
        LoginSet: {
          userLoginLimit: '',
          thirdPartyLogin: '',
          userLoginProtect: '',
          weiboLoginInterface: '',
          weiboAppKey: '',
          weiboAppSecret: '',
          qqLoginInterface: '',
          qqAppId: '',
          qqAppKey: '',
          weChatWebLoginInterface: '',
          wechatAppId: '',
          wechatAppSecret: '',
          wechatShareLoginInterface: '',
          wechatShareLoginAppId: '',
          wechatShareLoginAppSecret: '',
          mp: '',
          mpCode: '',
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getLoginSet(getTenantId()).then(response => {
          this.LoginSet = response.data
        }).catch(err => {
          console.log(err)
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.LoginSet.tenantId = getTenantId();
            addLoginSet(this.LoginSet).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      }
    }
  }
</script>

<style>
  .register {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
  }

  .dakai {
    float: right;
    position: absolute;
    right: 10px;
    bottom: -25px;
  }

  .money {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #f0f3ff;
    padding-right: 34px;
  }

  .weixin {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #ebf4ff;
    padding-right: 34px;
    margin-left: 0px;
  }

  .lianjie {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e4fafd;
    padding-right: 34px;
  }

  .fenxiang {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #ecfbe9;
    padding-right: 34px;
  }
</style>
